<template>
  <div id="bar">
      <!-- 导航 -->
      <div class="bar">
          <div class="left">
              <span>小米商城</span>
              <span>MIUI</span>
              <span>IoT</span>
              <span>天性数科</span>
              <span>有品</span>
              <span>小爱开发平台</span>
              <span>企业团购</span>
              <span>资质证照</span>
              <span>协议股则</span>
              <span>智能生活</span>
          </div>
          <div class="shan"  @click="shopping">
              <i class="iconfont icon-che"></i>
              <span>购物车</span>
              <div class="lop"></div>
          </div>
          <div class="right">
              <span @click="log">登录</span>
              <span @click="and">注册</span>
              <span>消息通知</span>
          </div>
          
      </div>
  </div>
</template>

<script>
export default {
   methods:{
       log(){
          this.$router.push({path:'/'}) 
       },
       and(){
           this.$router.push({path:"/regist"})
       },
       shopping(){
           this.$router.push({path:'/shopping'})
       }
   }
}
</script>

<style lang='scss' scopen>
#bar{
    background-color: #333;
    height: 40px;
    line-height: 40px;
    .bar{
        width: 1226px;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        .left{
            height: 40px;
           display: inline-block;
           float: left;
           
           span{
              color: #b0b0b0;
              font-size: 12px;
              margin-left: 10px;
              cursor: pointer;
              &:hover{
                  color: #fff;
              }
           }
        }
        .right{
            height: 40px;
            display: inline-block;
            float: right;
            span{
               color: #b0b0b0;
               font-size: 12px;
               margin-right: 10px;
               cursor: pointer;
               &:hover{
                  color: #fff;
              }
            }
        }
        .shan{
            position: relative;
            height: 40px;
            text-align: center;
            width: 120px;
            float: right;
            margin-right: 47px;
            display: inline-block;
             cursor: pointer;
            background-color: #424242;
            &:hover .lop{
                display: block;
            }
            span{
                color: #b0b0b0;
               font-size: 12px;
              
            }
            i{
                color: #b0b0b0;
                margin-right: 10px;
            }
            .lop{
                position: absolute;
                top: 39px;
                left: -198px;
                height: 100px;
                width: 316px;
               display: none;
                background-color: pink;
            }
        }
    }
}

</style>